<template>
    <div class="chat-content">
        <div class="mb-[10px]" v-if="file.type">
            <RecordImage
                v-if="file.type == 1"
                :url="file.url"
                :name="file.name"
            />
            <RecordFile
                v-else-if="file.type == 2"
                :url="file.url"
                :name="file.name"
            />
        </div>



        <!-- Text Message -->
        <template v-if="MsgMap['TEXT'] === type">
            <div class="chat-text">

                <ClientOnly>

                  <div v-if="isProbablyHTML(content)">
                    <div class="py-4" v-html="content"></div>
                  </div>

                  <div v-else>

                    <Markdown
                      v-if="useMarkdown"
                      :recordId="recordId"
                      :content="content"
                      :line-numbers="lineNumbers"
                      :line-clamp="lineClamp"
                      :typing="loading"
                    ></Markdown>
                    <!---->
                    <div
                      v-else
                      class="whitespace-pre-line chat-html"
                      :class="{
                            'wait-typing': loading,
                            '-webkit-line-clamp': lineClamp
                        }"
                    >
                      {{ content }}
                    </div>
                  </div>
                  <vue-mermaid v-if="props.strs"
                    :nodes="mermaidContent"
                    :type="props.strs"

                  ></vue-mermaid>

                  <div v-if="binary_data_base64">
                    <div v-for="(item,index) in binary_data_base64" :key="index">
                      <img :src="'data:image/png;base64,' + item" alt="Base64 Image"/>
                    </div>
                  </div>
                </ClientOnly>
            </div>

          <el-tooltip   v-if="!loading  && props.types == 2"  effect="dark"
                        placement="top" content="复制">
            <ElButton

                class="mt-2"
                circle
                @click="emit('copy')"
            >
                <template #icon>
                    <Icon name="el-icon-CopyDocument" />
                </template>

            </ElButton>
          </el-tooltip>

          <!--<el-tooltip
              v-if="showRewriteBtn && !loading  && props.types == 2"
              effect="dark"
              content="重写"
              placement="top"
          >
            <ElButton class="mt-2" circle @click="emit('rewrite')">
              <template #icon>
                <Icon name="el-icon-RefreshRight" />
              </template>
            </ElButton>
          </el-tooltip>-->
          <el-tooltip
              v-if="showCollectBtn && !loading  && props.types == 2"
              effect="dark"
              placement="top"
              :content="isCollet ? '取消收藏' : '收藏'"
          >
            <ElButton class="mt-2" circle @click="collect">
              <template #icon>
                <Icon
                    v-if="isCollet "
                    color="#FBAE00"
                    size="18"
                    name="el-icon-StarFilled"
                />
                <Icon v-else name="el-icon-Star" />
              </template>
            </ElButton>
          </el-tooltip>









          <el-tooltip
              v-if="!loading && props.types == 2"
              effect="dark"
              content="生成PPT"
              la
              placement="top"
              :popper-class="props.is_member_download==1?'res':''"
          >
            <ElButton class="mt-2 pdd" @click="addPPT">
              <template #icon>
                <div style="margin-right: 3px;font-size: 12px" >生成PPT</div>

              </template>
            </ElButton>
          </el-tooltip>

          <el-tooltip
              v-if="!loading && props.types == 2"
              effect="dark"
              content="下载words"
              la
              placement="top"
              :color="props.is_member_download==1?('color: '+appStore.config.theme_config.data.primaryColor+''):''"
              :popper-class="props.is_member_download==1?'res':''"
          >
            <ElButton class="mt-2 pdd" @click="wodrs" :style=" + props.is_member_download==1?('color: '+appStore.config.theme_config.data.primaryColor+''):''">
              <template #icon>
                <div style="margin-right: 3px;font-size: 12px"  :style=" + props.is_member_download==1?('color: '+appStore.config.theme_config.data.primaryColor+''):''">下载</div>
                <Icon name="el-icon-DocumentAdd" />
              </template>
            </ElButton>
          </el-tooltip>



            <template v-if="showVoiceBtn && recordId">
                <ElButton v-if="audioPlaying" class="mt-2" link @click="pause">
                    <template #icon>
                        <Icon name="local-icon-audio_voice" />
                    </template>
                    停止
                </ElButton>
                <ElButton
                    v-else
                    class="mt-2"
                    link
                    @click="play"
                    :loading="audioLoading"
                >
                    <template #icon>
                        <Icon name="local-icon-audio_voice" />
                    </template>
                    朗读
                </ElButton>
            </template>
        </template>

    </div>
</template>

<script lang="ts" setup>
import {useAppStore} from "~/stores/app";

const mermaidContent = [{
  id: "1",
  link: ["-- yes -->", "-- no -->"],
  linkNumber: 1,
  linkStyle: "fill:none,stroke:red,stroke-width:1px;",
  next: ["2", "3"]
}
]
import { E_Msg } from '@/enums/appEnums'
import { getChatBroadcast } from '~/api/chat'
import RecordImage from './record-image.vue'
import RecordFile from './record-file.vue'
import {ElButton} from "element-plus";
import vueMermaid from "vue-mermaid/src/vue-mermaid.vue";
const appStore = useAppStore()
const is_mermaid = ref(false)
const mermaid_types = ref('')
const props = defineProps({
    useMarkdown: {
        type: Boolean,
        default: false
    },
    lineNumbers: {
        type: Boolean,
        default: true
    },
    // 显示富文本行数
    lineClamp: {
        type: [Number],
        default: 0
    },
  model_id:{
    type: [Number],
    default: 0
  },
    loading: {
        type: Boolean,
        default: false
    },
  strs:{
    type: [String],
    default: ''
  },
  types:{
    type: Number,
    default: 1
  },
    type: {
        type: Number,
        default: 1
    },
    content: {
        type: [String],
        default: ''
    },
    index: {
        type: [Number]
    },
    recordId: {
        type: [String, Number]
    },
    showVoiceBtn: {
        type: Boolean,
        default: false
    },
    showCopyBtn: {
        type: Boolean,
        default: false
    },
  showCollectBtn: {
    type: Boolean,
    default: true
  },
  showRewriteBtn: {
    type: Boolean,
    default: false
  },
  is_member_download:{
    type: String,
    default:0
},
  isCollet: {
    type: Number
  },
  showPoster: {
    type: Boolean,
    default: true
  },
  binary_data_base64:{
    type: Object,
    default: () => ({})
  },
    file: {
        type: Object,
        default: () => ({})
    }
})

const init = () => {
  console.log(props.strs)
  console.log(props.content)
}



const { recordId, index } = toRefs(props)
const params = reactive({
    records_id: recordId,
    content: index,
    type: 1
})
const emit = defineEmits(['copy','collect',
  'close',
  'copyContent',
  'copyMyContent',
  'poster',
  'rewrite',
  'wodrs'])
const { play, audioPlaying, pause, audioLoading } = useAudioPlay({
    api: getChatBroadcast,
    dataTransform(data) {
        return data.file_url
    },
    params: params
})

const isProbablyHTML = (str) => {
  // 正则表达式匹配常见的HTML标签
  const htmlTagRegex = /<html\b[^>]*>.*?<\/html>/i;
  return htmlTagRegex.test(str);
}


const collect = () => {
  emit('collect')
}
//下载words
const wodrs = () => {

  emit('wodrs')
}

const addPPT = () => {
  emit('addppt')
}

const MsgMap = computed(() => {
    return Object.freeze({ ...E_Msg })
})


onMounted(async () => {
  init()
})
</script>

<style lang="scss" scoped>
@mixin typing {
    display: inline-block;
    content: '';
    width: 5px;
    height: 14px;
    transform: translate(4px, 2px) scaleY(1.3);
    background-color: #1a202c;
    animation: blink 0.6s infinite;
}
.wait-typing::after {
    @include typing;
}

@keyframes blink {
    from,
    to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@keyframes typingFade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 100%;
    }
    100% {
        opacity: 100%;
    }
}
.chat-content {
    .goods-message {
        width: 300px;
        .goods-image {
            min-width: 80px;
            min-height: 80px;
        }

        .goods-price {
            color: #ff2c3c;
        }
    }
    .chat-text {
        .typing {
            display: inline-block;
            vertical-align: -4px;
            height: 18px;
            width: 3px;
            background-color: var(--el-color-primary);
            animation: typingFade 0.6s infinite alternate;
        }
    }
    .chat-html {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.res {
  background-color: red;
}
.pdd {
  padding-left: 18px;
  padding-right: 18px;
  height: 28px;
}
</style>
